<template>
  <div ref="div"
       :id="onekitId"
       class="onekit-image"
       :class="onekitClass"
       :style="`${sizeFix};${onekitStyle};overflow:hidden!important;`">
    <img ref="img"
         :src="src"
         :loading="`${lazyLoad?'lazy':'eager'}`"
         @click="ui_click"
         @load="img_load" />
  </div>
</template>
<script>
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
export default {
  name: "onekit-image",
  mixins: [weixin_behavior, onekit_behavior],
  data () {
    return {
      sizeFix: ""
    };
  },
  props: {
    src: {
      type: String,
    },
    mode: {
      type: String,
      default: "scaleToFill",
    },
    webp: {
      type: [Boolean, String],
      default: false,
    },
    "lazy-load": {
      type: [Boolean, String],
      default: false,
    },
    "show-menu-by-longpress": {
      type: [Boolean, String],
      default: false,
    },
  },
  watch: {},
  mounted () { },
  methods: {
    img_load () {
      if (!this.$refs.img) {
        return
      }
      const real_width = this.$refs.img.naturalWidth;
      const real_height = this.$refs.img.naturalHeight;
      const img_width = this.$refs.div.clientWidth;
      const img_height = this.$refs.div.clientHeight;
      const real_k = real_height == 0 ? 10000 : real_width / real_height;
      const img_k = img_height == 0 ? 10000 : img_width / img_height;
      //
      let width = real_width, height = real_height;
      let left = 0, top = 0;
      switch (this.mode) {
        case "scaleToFill":
          width = img_width;
          height = img_height;
          break;
        case "aspectFit":
          if (real_k > img_k) {
            width = img_width;
            height = width * real_height / real_width;
            top = (img_height - height) / 2
          } else {
            height = img_height;
            width = height * real_width / real_height;
            left = (img_width - width) / 2
          }
          break;
        case "aspectFill":
          if (real_k > img_k) {
            height = img_height;
            width = height * real_width / real_height;
            left = (img_width - width) / 2
          } else {
            width = img_width;
            height = width * real_height / real_width;
            top = (img_height - height) / 2
          }
          break;
        case "top":
          left = (img_width - real_width) / 2
          break;
        case "bottom":
          left = (img_width - real_width) / 2
          top = img_height - real_height
          break;
        case "center":
          left = (img_width - real_width) / 2
          top = (img_height - real_height) / 2
          break;
        case "left":
          top = (img_height - real_height) / 2
          break;
        case "right":
          left = img_width - real_width
          top = (img_height - real_height) / 2
          break;
        case "top right":
          left = img_width - real_width
          break;
        case "top left":
          break;
        case "bottom left":
          left = img_width - real_width
          break;
        case "bottom right":
          left = img_width - real_width
          top = img_height - real_height
          break;
        case "widthFix":
          width = img_width
          height = width * real_height / real_width;
          this.sizeFix = `width:${width}px;height:${height}px;`;
          break;
        case "heightFix":
          height = img_height;
          width = height * real_width / real_height;
          this.sizeFix = `width:${width}px;height:${height}px;`;
          break;
        default:
          throw new Error(this.mode)
      }
      this.$refs.img.style = `overflow:hidden!important;margin-left:${left}px!important;margin-top:${top}px!important;width:${width}px!important;height:${height}px!important;`
    },
  },
};
</script>
<style>
</style>
